<!--
	电量显示icon
-->
<template>
	<view class="power-wrap">
		<view class="power-content" :style="{'height': size + 'px', 'border-color': powerColor}">
			<text class="power-item" :style="{'width': 14 * (value / 100) + 'px', 'background-color': powerColor}"></text>
		</view>
		<view class="power-after"
			:style="{ 'height': size / 2 + 'px', 'width': size / 6 + 'px', 'background-color': powerColor}">
		</view>
		<text v-if="showText" class="power-text">{{value}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			// 电池图标大小
			size: {
				type: Number,
				default: 12
			},
			// 显示电量text
			showText: {
				type: Boolean,
				default: false
			},
			// 电量
			value: {
				type: Number,
				default: 20
			}
		},
		data() {
			return {
				power: [25, 50, 75, 100]
			}
		},
		computed: {
			powerColor() {
				const value = this.value
				let color = '#4cd964'
				if(value < 11) {
					color = '#dd524d'
				} else if (value < 31) {
					color = '#f0ad4e'
				} else if(value < 61){
					color = '#007aff'					
				}
				
				return color
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.power-wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction:row;
	align-items: center;
}
.power-content {
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
	width: 18px;
	border-radius: 3px;
	padding: 1px;	
	display: flex;	
}
.power-item {
	display: block;
	/* #ifdef APP-NVUE */
	flex: 1;
	/* #endif */
}
.power-after {
	border-radius: 0 2px 2px 0;
}
.power-text {
	margin-left: 5px;
	font-size: 12px;
	color: #686868;
}
</style>
